<template >
  <div id="menuDiv" >
      <my_menu :routerKey_="routerKey" @routerKeyChange="routerKeyChange_"></my_menu><!--加载my_menu组件-->
  </div><!--此区域用于放置页面菜单-->
  <div id="mainDiv"> 
      <router-view :key="routerKey" ></router-view>
  </div><!--主页面区域,路由出口-->
</template>

<script setup>
  import my_menu from './components/My_menu.vue'//导入my_menu组件(配置了菜单和切换主题按钮)
  import {ref} from 'vue'
  const routerKey=ref(0)//创建一个边框用来控制路由的key,路由的key用于刷新对应页面
  const routerKeyChange_=(val)=>{//当key改变的时候,刷新对应的路由界面,子组件的开关组件切换主题时会要求刷新一次界面
      routerKey.value=val
  }
</script>

<style scoped>
  #menuDiv{
      width:100%;height:3vw;position:absolute;top:0;left:0;z-index:10000
  }
  #mainDiv{
      width:100%;height:calc(100% - 3vw);position:absolute;top:3vw;left:0;z-index:10;
  }
</style>
